<template>
    <div>
            <!-- 条件查询 -->
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                  <el-form :inline="true" :model="searchData"  class="demo-form-inline">
                    <el-form-item label="年级" :label-width="formLabelWidth">
                        <el-select v-model="searchData.grade" placeholder="请选择" clearable>
                          <el-option
                            v-for="item in grade"
                            :value="item.dictValue" 
                            :key="item.dictValue"             
                            :label="item.dictLabel">
                          </el-option>
                        </el-select>
                    </el-form-item>
                      <el-button type="primary" @click="searchAdmin">查询</el-button>
                      
                  </el-form>
                  </div></el-col>
            </el-row>

            <!-- 表格展示 -->
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                  <el-table :data="findAdminData" height="550" border>
                    <el-table-column prop="id" label="Id"></el-table-column>
                    <el-table-column prop="subject" label="学科"></el-table-column>
                    <el-table-column prop="grade" label="年级">
                        <template slot-scope="scope">
                            <span v-if="scope.row.grade ==0">一年级</span>
                            <span v-if="scope.row.grade ==1">二年级</span>
                            <span v-if="scope.row.grade ==2">三年级</span>
                            <span v-if="scope.row.grade ==3">四年级</span>
                            <span v-if="scope.row.grade ==4">五年级</span>
                            <span v-if="scope.row.grade ==5">六年级</span>
                            <span v-if="scope.row.grade ==6">初一</span>
                            <span v-if="scope.row.grade ==7">初二</span>
                            <span v-if="scope.row.grade ==8">初三</span>
                            <span v-if="scope.row.grade ==9">高一</span>
                            <span v-if="scope.row.grade ==10">高二</span>
                            <span v-if="scope.row.grade ==11">高三</span>
                        </template>

                    </el-table-column>
                   
                    <el-table-column label="操作" width="260">
                        <template slot-scope="scope">                           
                            <el-button size="small" @click="getAdmin(scope.row)" plain>编辑</el-button>
                            <el-button size="small" type="danger" @click="delAdmin(scope.row)" plain >删除</el-button>
                        </template>
                    </el-table-column>
                  </el-table>

                <!-- 分页 -->
                <div class="block">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" style="float:right">
                    </el-pagination>
                </div>


                  </div></el-col>
            </el-row>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data(){
        return{
          formLabelWidth: '120px', //新增表单宽度
            findAdminData:[],
            pageNum:1,
            pageSize:2,
            total:null,
            searchData:{
                "grade":""
            },
            grade:[]

        }
    },
    created(){
        this.searchDict();
        this.initTable()
    },
    methods:{

        searchDict(){
        
          axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
            this.grade =res.data.data
          })

        },

        //删除
        delAdmin(row){
            axios.delete("/api/subject/deleteSubjectById?id="+row.id).then(res=>{
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.initTable();
            })
        },
        //条件查询
        searchAdmin(){
            this.initTable();
        },
        //查询
        initTable(){
            axios.post("/api/subject/findSubjectPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,this.searchData)
                .then(res=>{
                    this.findAdminData = res.data.data.items
                    this.total = res.data.data.totalElements
                })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },

        getAdmin(row){
          //跳页面并带id
          sessionStorage.setItem("id",row.id);
            this.$router.push("/dept")
        }

    }
    
}
</script>

<style scoped>

</style>